﻿<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_JCarouselControl"
    CodeBehind="JCarouselControl.ascx.cs" %>
<!--
  jCarousel library
-->
<script type="text/javascript" src="/Javascripts/JCarousel/lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="/Javascripts/JCarousel/css/jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="/Javascripts/JCarousel/skins/tango/skin.css" />
<script type="text/javascript">

    function mycarousel_initCallback(carousel) {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function () {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function () {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function () {
            carousel.stopAuto();
        }, function () {
            carousel.startAuto();
        });
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            auto: 1,
            scroll: 1,
            visible: 6,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });
    });

</script>
<div style="margin-top: 20px; height: 119px; width: 100%; text-align: center;">
    <asp:Repeater ID="rpProducts" runat="server">
        <HeaderTemplate>
            <ul id="mycarousel" class="jcarousel-skin-tango">
        </HeaderTemplate>
        <ItemTemplate>
            <li style="width: 160px;">
                <div style="width: 140px; height: 104px">
                    <a href='/san-pham-chi-tiet/<%#Eval("SanPhamID")%>.aspx'>
                        <asp:Image ID="Image3" Width="110" Height="80" runat="server" ImageUrl='<%# Eval("HinhAnhUrl", "~/ImageDatas/Products/{0}")%>' />
                    </a>
                </div>
                <div style="text-align: center; color: #343434; font-size: 11px; font-weight: bold;">
                    <%if (IsVN)
                      { %>
                    <a href='/san-pham-chi-tiet/<%#Eval("SanPhamID")%>.aspx' class='a_jcourse'>
                        <%#Eval("TenSanPhamVN") %></a>
                    <%}
                      else
                      {%>
                    <a href='/san-pham-chi-tiet/<%#Eval("SanPhamID")%>.aspx' class='a_jcourse'>
                        <%#Eval("TenSanPhamOther") %></a>
                    <%} %>
                </div>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
    <%-- <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>
    <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>
    <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>
    <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>
    <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>
    <li style="width: 160px;">
        <div style="width: 158px; height: 104px">
            <img src="Templates/Images/sp1.jpg" width="158px" height="104px;" alt="" /></div>
        <div style="text-align: center; color: #343434; font-size: 13px; font-weight: bold;">
            Sản phẩm 1
        </div>
    </li>--%>
</div>
